<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GIF播放与暂停</title>
    <style>
.last {
    margin-top: 100px;
}
    </style>
</head>
<body>
    <p>点击GIF播放或暂停：</p>
    <img id="source" src="./assets/sutaner.gif" width="184" height="175">
    <p>康娜：</p>
    <img src="./assets/kangna.gif" width="200" height="123">
    <p><button id="b">暂停</button></p>

    <p class="last">参考文章：<a href="https://www.zhangxinxu.com/wordpress/?p=10830">https://www.zhangxinxu.com/wordpress/?p=10830</a></p>

<script src="./src/renderGif.js"></script>
<script>
// 重绘gif
renderGif(source);
const gifPlayer = renderGif('img[src*="kangna"]', {
    bindEvent: false
});
b.onclick = function () {
    if (gifPlayer.paused) {
        this.textContent = '暂停';
        gifPlayer.play();
    } else {
        this.textContent = '播放';
        gifPlayer.pause();
    }
};

// 测试不设置参数
// renderGif();
</script>
</body>
</html>